<script setup lang="ts">
import { ZoomIn, ZoomOut } from '@icon-park/vue-next'
import ContextmenuItem from '@/views/main/data-flow/design/components/operation-contextmenu/ContextmenuItem.vue'
import type {
  ConnectorOperation,
  ContextmenuType,
  NodeOperation,
  OperationSpaceOperation
} from '@/views/main/data-flow/design/components/operation-contextmenu/index'
import { useDataFlowState } from '@/model/data-flow/data-flow-state'

const emits = defineEmits(['update:modelValue'])
defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  type: {
    type: String as () => ContextmenuType,
    required: false,
    default: 'operation-space'
  },
  operation: {
    type: Object as () => NodeOperation | ConnectorOperation | OperationSpaceOperation,
    required: false
  },
  setZoom: {
    type: Function,
    required: false,
    default: () => {}
  }
})

const { dataFlowState } = useDataFlowState()

function closeContextmenu() {
  emits('update:modelValue', false)
}
</script>

<template>
  <div class="data-flow-contextmenu">
    <template v-if="type === 'operation-space'">
      <contextmenu-item
        name="粘贴"
        shortcut-keys="Ctrl+V"
        :disable="dataFlowState.clipboard.nodes.size === 0"
        @click="(operation as OperationSpaceOperation).paste"
      />
    </template>
    <template v-if="type === 'connector'">
      <contextmenu-item
        name="删除"
        @click="(operation as ConnectorOperation).delete"
      />
    </template>
    <template v-if="type === 'node'">
      <contextmenu-item
        v-if="dataFlowState.selectedNodes.size === 1"
        name="编辑"
        @click="(operation as NodeOperation)?.edit"
      />
      <contextmenu-item
        name="复制"
        shortcut-keys="Ctrl+C"
        @click="(operation as NodeOperation)?.copy"
      />
      <contextmenu-item name="删除" @click="operation?.delete" />
    </template>
    <div class="divider"></div>
    <contextmenu-item
      name="放大"
      :icon="ZoomIn"
      @click="
        () => {
          setZoom(10, 1)
          closeContextmenu()
        }
      "
    />
    <contextmenu-item
      name="缩小"
      :icon="ZoomOut"
      @click="
        () => {
          setZoom(10, -1)
          closeContextmenu()
        }
      "
    />
    <div class="divider"></div>
    <contextmenu-item
      name="全选"
      shortcut-keys="Ctrl+A"
      @click="
        () => {
          dataFlowState.selectAllNode()
          closeContextmenu()
        }
      "
    />
  </div>
</template>

<style scoped lang="scss">
.data-flow-contextmenu {
  width: 250px;
  padding: 5px 5px;
  border-radius: 5px;
  background-color: white;
  border: 1px solid rgba(100, 100, 100, 0.3);
  box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.2);
  user-select: none;

  .divider {
    height: 1px;
    width: 100%;
    margin: 5px 0;
    background-color: var(--el-border-color-light);
  }
}
</style>
